<template>
  <div class="d_main not">
    <div class="d_header">
      <div class="d_header_title">
        <div class="back pointer" @click="handleBack">
          <span class="el-icon-arrow-left"></span>
          <p>返回</p>
        </div>
        <h3>人员详情</h3>
      </div>
      <div class="d_header_btn">
        <el-button type="primary" size="small" @click="handleSave" :loading="saveLoading" v-if="!allDisable"
          >保存</el-button
        >
      </div>
    </div>
    <div class="d_mainCenter p0 flex">
      <div class="left_tag">
        <p
          class="nav1"
          :class="tabIndex == index ? 'active' : ''"
          v-for="(item, index) in tagList"
          :key="index"
          @click="handleTagClick(item, index)"
        >
          {{ item.title }}
        </p>
      </div>
      <div class="container pl30 pt10 section" @scroll="scrollEvent">
        <el-form
          ref="formModel"
          :model="formModel"
          :rules="rules"
          :disabled="allDisable"
          label-width="130px"
        >
          <div class="cTitle" id="1">
            <h3>基础信息</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="员工工号">
                <el-input
                  v-model="formModel.employeeWorkNo"
                  placeholder="请输入内容"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工姓名">
                <el-input
                  v-model="formModel.employeeName"
                  placeholder="请输入内容"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input
                  v-model="formModel.mobile"
                  placeholder="请输入内容"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="所属部门">
                <el-cascader
                  ref="cascader"
                  v-model="formModel.departmentCode"
                  :options="dialogDepartData"
                  :props="depProps"
                  filterable
                  size="small"
                  style="width: 100%"
                  @change="handleDepartmentChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工角色">
                <el-select
                  v-model="formModel.roleCode"
                  size="small"
                  filterable
                  placeholder="请选择"
                  :disabled="userInfo.userRoleCode == formModel.roleCode"
                >
                  <el-option
                    v-for="item in roleArr"
                    :key="item.roleCode"
                    :label="item.roleName"
                    :value="item.roleCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="员工备注">
                <el-form-item>
                  <el-input
                    v-model="formModel.employeeRemark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    size="small"
                  />
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cTitle" id="2">
            <h3>工作信息</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="员工类型">
                <el-select
                  v-model="formModel.employeeType"
                  placeholder="请选择"
                  filterable
                  size="small"
                >
                  <el-option
                    v-for="item in staffType"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入职日期">
                <el-date-picker
                  v-model="formModel.hiredate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                  @change="handleHiredateChange"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工状态">
                <el-select
                  v-model="formModel.employeeState"
                  placeholder="请选择"
                  filterable
                  size="small"
                >
                  <el-option
                    v-for="item in staffState"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="试用期">
                <el-input
                  v-model="formModel.probation"
                  placeholder="请输入内容"
                  size="small"
                >
                  <div
                    slot="suffix"
                    style="padding-right: 5px; padding-top: 3px"
                  >
                    月
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划转正日期">
                <el-date-picker
                  v-model="formModel.planPositiveTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际转正日期">
                <el-date-picker
                  v-model="formModel.positiveTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="岗位职级">
                <el-input
                  v-model="formModel.employeeRank"
                  placeholder="请输入内容"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cTitle" id="3">
            <h3>个人信息</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="证件号码" prop="idCardNo">
                <el-input
                  v-model="formModel.idCardNo"
                  placeholder="请输入内容"
                  size="small"
                  @blur="handleIdCardChange"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="formModel.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄（系统计算）">
                <el-input
                  v-model="formModel.age"
                  placeholder="系统自动计算"
                  size="small"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="员工性别">
                <el-select
                        filterable
                  v-model="formModel.employeeSex"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option label="男" :value="1"> </el-option>
                  <el-option label="女" :value="2"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族">
                <el-select
                  v-model="formModel.nation"
                  placeholder="请选择"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in nationList"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现居住地址">
                <el-input
                  v-model="formModel.currentAddress"
                  placeholder="请输入内容"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="身份证地址">
                <el-input
                  v-model="formModel.homeAddress"
                  placeholder="请输入内容"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件有效期">
                <el-date-picker
                  v-model="formModel.certificateValidity"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况">
                <el-select
                  v-model="formModel.maritalStatus"
                  placeholder="请选择"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in maritalStatusList"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="首次参加工作时间">
                <el-date-picker
                  v-model="formModel.beginWorkTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工龄（系统计算）">
                <el-input
                  v-model="formModel.workAge"
                  placeholder="系统自动计算"
                  size="small"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="户籍类型">
                <el-select
                  v-model="formModel.huJi"
                  placeholder="请选择"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in RegisteredResidenceTypeList"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="政治面貌">
                <el-select
                  v-model="formModel.politicsStatus"
                  placeholder="请选择"
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in politicsStatusList"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="个人社保账户">
                <el-input
                  v-model="formModel.socialSecurityAccount"
                  placeholder="请输入个人社保账户"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="个人公积金账户">
                <el-input
                  v-model="formModel.providentFundAccount"
                  placeholder="请输入个人公积金账户"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cTitle" id="4">
            <h3>银行卡信息</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="银行卡号">
                <el-input
                  v-model="formModel.bankCardNo"
                  placeholder="请输入银行卡号"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户行">
                <el-input
                  v-model="formModel.bankAddress"
                  placeholder="请输入开户行"
                  size="small"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cTitle" id="5">
            <h3>合同信息</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="首次合同起始日">
                <el-date-picker
                  v-model="formModel.contractSignedDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="首次合同到期日">
                <el-date-picker
                  v-model="formModel.contractExpirationDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现合同起始日">
                <el-date-picker
                  v-model="formModel.nowContractSignedDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="现合同到期日">
                <el-date-picker
                  v-model="formModel.nowContractExpirationDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同期限">
                <el-input
                  v-model="formModel.contractPeriod"
                  placeholder="请输入内容"
                  size="small"
                >
                  <div
                    slot="suffix"
                    style="padding-right: 5px; padding-top: 3px"
                  >
                    月
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="续签次数">
                <el-input
                  v-model="formModel.renewalTimes"
                  placeholder="请输入内容"
                  size="small"
                >
                  <div
                    slot="suffix"
                    style="padding-right: 5px; padding-top: 3px"
                  >
                    次
                  </div>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="cTitle" id="6">
            <h3>学历信息</h3>
          </div>
          <el-table :data="formModel.educationList" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column
              prop="educationCode"
              align="center"
              label="学历"
              width="150"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.educationCode"
                  placeholder="请选择"
                  size="small"
                  filterable
                  @change="handleSelectChange(scope.row, scope.$index, $event)"
                >
                  <el-option
                    v-for="item in educationList"
                    :label="item.displayValue"
                    :value="item.dicValueCode"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="school" align="center" label="毕业院校">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.school"
                  placeholder="请输入毕业院校"
                  size="small"
                  @blur="handleSelectChange(scope.row, scope.$index, $event)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="graduationTime"
              align="center"
              label="毕业时间"
              width="200"
            >
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.graduationTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  placeholder="请选择毕业时间"
                  @change="handleSelectChange(scope.row, scope.$index, $event)"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              prop="major"
              align="center"
              label="所学专业"
              width="350"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.major"
                  placeholder="请输入所学专业"
                  size="small"
                  @blur="handleSelectChange(scope.row, scope.$index, $event)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
              v-if="!allDisable"
            >
              <template slot-scope="scope">
                <div class="flex flex_between pl12 pr12">
                  <i
                    class="el-icon-document-copy"
                    v-if="scope.$index != formModel.educationList.length - 1"
                    @click="handleEducationCopyRow(scope.row, scope.$index)"
                  ></i>
                  <i
                    class="el-icon-delete"
                    v-if="scope.$index != formModel.educationList.length - 1"
                    @click="handleEducationDeleteRow(scope.row, scope.$index)"
                  ></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="cTitle" id="7">
            <h3>紧急联系人</h3>
          </div>
          <el-table :data="formModel.contactList" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column
              prop="contactName"
              align="center"
              label="联系人姓名"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.contactName"
                  placeholder="请输入联系人"
                  size="small"
                  @blur="handleContactChange(scope.row, scope.$index, $event)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="contactRelationship"
              align="center"
              label="联系人关系"
              width="200"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.contactRelationship"
                  placeholder="请输入联系人关系"
                  size="small"
                  @blur="handleContactChange(scope.row, scope.$index, $event)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="contactPhone"
              align="center"
              label="联系人电话"
              width="200"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.contactPhone"
                  placeholder="请输入联系人电话"
                  size="small"
                  @blur="handleContactChange(scope.row, scope.$index, $event)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" align="center" label="备注">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  placeholder="请输入备注"
                  size="small"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
              v-if="!allDisable"
            >
              <template slot-scope="scope">
                <div class="flex flex_between pl12 pr12">
                  <i
                    class="el-icon-document-copy"
                    v-if="scope.$index != formModel.contactList.length - 1"
                    @click="handleCopyRow(scope.row, scope.$index)"
                  ></i>
                  <i
                    class="el-icon-delete"
                    v-if="scope.$index != formModel.contactList.length - 1"
                    @click="handleDeleteRow(scope.row, scope.$index)"
                  ></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="cTitle" id="8">
            <h3>个人材料</h3>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px">身份证(人像面)：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(0, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl.length > 0"
                      :src="imageUrl"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px">身份证(国徽面)：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(1, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl1.length > 0"
                      :src="imageUrl1"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px">学历证书：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(2, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl2.length > 0"
                      :src="imageUrl2"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="mt20">
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px; padding-left: 40px">学位证书：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(3, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl3.length > 0"
                      :src="imageUrl3"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px">前公司离职证明：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(4, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl4.length > 0"
                      :src="imageUrl4"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex">
                <div style="height: 150px">员工照片：</div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action=" "
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return myUpload(5, file);
                      }
                    "
                  >
                    <img
                      v-if="imageUrl5.length > 0"
                      :src="imageUrl5"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <span class="tips"
                    >上传图片只能是JPG/PNG格式,不能超过2MB</span
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
    <script>
import SelectCraftlist from "@/components/selectCraft";
import SelectMateriaList from "@/components/selectMaterial";
import labelTree from "@/components/labelTree";
import LableShow from "@/components/lableShow";
import { mapGetters } from "vuex";
export default {
  name: "productionOrderNewDetail",
  components: {
    labelTree,
    SelectCraftlist,
    SelectMateriaList,
    LableShow,
  },
  computed: {
    ...mapGetters(["userInfo", "name"]),
  },
  data() {
    //身份证校验
    const isCnNewID = (rule, value, callback) => {
      var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //加权因子
      var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2]; //校验码
      if (/^\d{17}\d|x$/i.test(value)) {
        var sum = 0,
          idx;
        for (var i = 0; i < value.length - 1; i++) {
          // 对前17位数字与权值乘积求和
          sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
        }
        // 计算模（固定算法）
        idx = sum % 11;
        // 检验第18为是否与校验码相等
        if (arrValid[idx] == value.substr(17, 1).toUpperCase()) {
          callback();
        } else {
          callback("身份证格式有误");
        }
      } else if(!value){
        callback();
      }else {
        callback("身份证格式有误");
      }
    };
    return {
      formModel: {
        employeeCode: "", //员工代码（唯一识别码，工号）
        employeeName: "", //员工姓名
        employeeSex: 0, //员工性别：1表示男；2表示女
        roleCode: "", //	角色编码
        idCardNo: "", //	身份证号
        birthday: "", //出生日期
        age: "", //年龄
        workAge: "", //工龄
        mobile: "", //手机号码
        nation: "", //所属民族（外联字典明细表唯一识别码）
        homeAddress: "", //	身份证地址
        currentAddress: "", //现居住地址
        email: "", //Email地址
        employeeState: "", //员工状态（外联字典明细表唯一识别码）
        hiredate: "", //入职时间
        departmentCode: "", //	部门编码
        probation: 0, //	试用期（单位：月）
        positiveTime: "", //实际转正时间
        modifyBy: "", //	修改人员编码
        modifyDate: "", //修改时间
        maritalStatus: "", //婚姻状况（外联字典明细表唯一识别码）
        politicsStatus: "", //政治面貌（外联字典明细表唯一识别码）
        beginWorkTime: "", //首次参加工作时间
        isDelete: 0, //是否删除：0否；1是
        contractSignedDate: "", //首次合同签订日期
        contractExpirationDate: "", //首次合同到期日期
        employeeRemark: "", //员工备注
        huJi: "", //	户籍类型
        employeeType: "", //员工类型（关联字典表）
        planPositiveTime: "", //计划转正日期
        employeeRank: "", //员工职级
        certificateValidity: "", //证件有效期
        socialSecurityAccount: "", //社保账户
        providentFundAccount: "", //公积金账户
        bankCardNo: "", //银行卡号
        bankAddress: "", //开户行地址
        nowContractSignedDate: "", //现合同起始日期
        nowContractExpirationDate: "", //现合同到期日期
        contractPeriod: 0, //	合同期限
        renewalTimes: 0, //续签次数
        employeeWorkNo: "", //	员工工号
        educationList: [
          //学历信息
          {
            employeeCode: "", //员工编码
            educationCode: "", //	学历编码（关联字典表）
            school: "", //	毕业院校
            graduationTime: "", //毕业时间
            major: "", //	所学专业
          },
        ],
        contactList: [
          //紧急联系人信息
          {
            employeeCode: "", //	员工编码
            contactName: "", //联系人姓名
            contactRelationship: "", //与联系人关系
            contactPhone: "", //联系电话
            remark: "", //备注
          },
        ],
        fileDataList: [
          //fileDataList
          {
            employeeFileDataID: 0, //
            employeeCode: "", //员工编码
            fileType: 0, //文件类型0：身份证人像面；1：身份证国徽面；2：学历证书；3：学位证书；4：离职证明；5：员工照片
            fileUrl: "", //文件路径
            fileOriginalName: "", //原文件名
            filePreviewUrl: "", //预览图路径
            craeteTime: "", //上传时间
            creator: "", //上传人
          },
        ],
      },
      rules: {
        idCardNo: [
          {
            //调用上面定义的方法校验格式是否正确
            validator: isCnNewID,
            trigger: "blur",
          },
        ],
      },
      tagList: [
        {
          title: "基础信息",
        },
        {
          title: "工作信息",
        },
        {
          title: "个人信息",
        },
        {
          title: "银行卡信息",
        },
        {
          title: "合同信息",
        },
        {
          title: "学历信息",
        },
        {
          title: "紧急联系人",
        },
        {
          title: "个人材料",
        },
      ],
      tabIndex: 0,
      imageUrl: [],
      imageUrl1: [],
      imageUrl2: [],
      imageUrl3: [],
      imageUrl4: [],
      imageUrl5: [],
      dialogDepartData: [], //部门数据源
      roleArr: [], //角色数据
      staffType: [], //员工类型
      staffState: [], //员工状态
      nationList: [], //民族
      maritalStatusList: [], //婚姻状况
      RegisteredResidenceTypeList: [], //户籍类型
      politicsStatusList: [], //政治面貌
      educationList: [], //学历
      saveLoading:false,
      allDisable:false,
      depProps: {
        label: "departmentName",
        value: "departmentCode",
        checkStrictly: true,
      },
    };
  },
  created() {
    this.getDialogAllbm(); //获取部门数据源
    this.getRole(); //获取角色
    this.getStaffType(); //获取员工类型
    this.getStaffState(); //获取员工状态
    this.getNationList(); //获取民族
    this.getMaritalStatusList(); //获取婚姻状况
    this.getRegisteredResidenceTypeList(); //获取户籍类型
    this.getPoliticsStatusList(); //获取政治面貌
    this.getEducationList(); //获取学历
    this.getDetail(this.$route.query.employeeID);
    if(this.$route.query.type == 'see'){
      this.allDisable = true
    }else{
      this.allDisable = false
    }
  },
  mounted() {},
  methods: {
    //详情滑动事件
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll(".cTitle");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.tabIndex = i;
          break;
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        // this.tabIndex = 2
      }
    },

    // 获取所有部门
    getDialogAllbm() {
      this.$api.user.GetAllDepartments().then((res) => {
        this.dialogDepartData = res;
      });
    },

    //获取员工类型
    getStaffType() {
      this.$api.user.GetEmployeeTypeList().then((res) => {
        this.staffType = res;
      });
    },


    //获取员工状态
    getStaffState() {
      this.$api.user.GetEmployeeStateList().then((res) => {
        this.staffState = res;
      });
    },

    //获取民族
    getNationList() {
      this.$api.user.GetEmployeeNationList().then((res) => {
        this.nationList = res;
      });
    },

    //获取婚姻状况
    getMaritalStatusList() {
      this.$api.user.GetEmployeeMaritalStatusList().then((res) => {
        this.maritalStatusList = res;
      });
    },

    //获取户籍类型
    getRegisteredResidenceTypeList() {
      this.$api.user.GetRegisteredResidenceTypeList().then((res) => {
        this.RegisteredResidenceTypeList = res;
      });
    },

    //获取政治面貌
    getPoliticsStatusList() {
      this.$api.user.GetPoliticsStatusList().then((res) => {
        this.politicsStatusList = res;
      });
    },

    //获取学历
    getEducationList() {
      this.$api.user.GetDegreeList().then((res) => {
        this.educationList = res;
      });
    },

    //获取所有角色
    getRole() {
      this.$api.user
        .GetAllSystemRoles()
        .then((res) => {
          this.roleArr = res;
        });
    },

    //所属部门选择事件
    handleDepartmentChange(val) {
      const index = val.length - 1;
      this.formModel.departmentCode = val[index];
      this.$refs.cascader.dropDownVisible = false;
    },

    //保存
    handleSave() {
      if(!this.formModel.roleCode){
        this.$message.warning('请选择角色')
        return
      }

      //删除学历信息空数据
      this.formModel.educationList.forEach((item, index) => {
        if (!item.educationCode) {
          this.formModel.educationList.splice(index, 1);
        }
      });

      //删除紧急联系人空数据
      this.formModel.contactList.forEach((item, index) => {
        if (!item.contactName) {
          this.formModel.contactList.splice(index, 1);
        }
      });
      this.$refs.formModel.validateField("idCardNo", (valid) => {
        if (!valid) {
          this.saveLoading = true
          this.$api.user.UpdateEmployeeBaseData(this.formModel).then((res) => {
        this.$message.success('保存成功')
        this.$router.go(-1);
      }).catch(()=>{this.saveLoading = false});
        }
      });

    },

    //复制学历信息
    handleEducationCopyRow(row, index) {
      this.formModel.educationList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
    },

    //删除学历信息
    handleEducationDeleteRow(row, index) {
      this.formModel.educationList.splice(index, 1);
    },

    //复制紧急联系人
    handleCopyRow(row, index) {
      this.formModel.contactList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
    },

    //删除联系人
    handleDeleteRow(row, index) {
      this.formModel.contactList.splice(index, 1);
    },

    //入职日期选择事件
    handleHiredateChange(e) {
      console.log(this.getDiffDay(
        e,
        this.dayjs().format("YYYY-MM-DD")
      ))
      this.formModel.workAge = Math.floor(this.getDiffDay(
        e,
        this.dayjs().format("YYYY-MM-DD")
      )/365)
      this.$forceUpdate();
    },

    // 图片上传
    myUpload(fileType, e) {
      console.log(e);
      const file = e.file;
      const type = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (
        type !== "png" &&
        type !== "jpg" &&
        type !== "jpeg" &&
        type !== "gif" &&
        type !== "bmp"
      ) {
        this.$message.error("上传图片格式错误，请重新上传!");
        return false;
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M，请重新上传!");
        return false;
      } else {
        var formData = new FormData();
        formData.append("file", file);
        this.$api.common.UploadImageFile(formData).then((res) => {
          if (this.formModel.fileDataList.length > 0) {
            this.formModel.fileDataList.forEach((item) => {
              if (item.fileType == fileType) {
                item.fileUrl = res.fileFullUrl;
              } else {
                this.formModel.fileDataList.push({
                  employeeFileDataID: 0,
                  employeeCode: this.formModel.employeeCode,
                  fileType: fileType,
                  fileUrl: res.fileFullUrl,
                  fileOriginalName: res.originalName,
                  filePreviewUrl: res.fileUrl,
                  craeteTime: "",
                  creator: "",
                });
              }
            });
          } else {
            this.formModel.fileDataList.push({
              employeeFileDataID: 0,
              employeeCode: this.formModel.employeeCode,
              fileType: fileType,
              fileUrl: res.fileFullUrl,
              fileOriginalName: res.originalName,
              filePreviewUrl: res.fileUrl,
              craeteTime: "",
              creator: "",
            });
          }
          console.log(this.formModel.fileDataList);
          if (fileType == 0) {
            //身份证人像面
            this.imageUrl = res.fileFullUrl;
          } else if (fileType == 1) {
            //身份证国徽面
            this.imageUrl1 = res.fileFullUrl;
          } else if (fileType == 2) {
            //学历证书
            this.imageUrl2 = res.fileFullUrl;
          } else if (fileType == 3) {
            //学位证书
            this.imageUrl3 = res.fileFullUrl;
          } else if (fileType == 4) {
            //离职证明
            this.imageUrl4 = res.fileFullUrl;
          } else if (fileType == 5) {
            //员工照片
            this.imageUrl5 = res.fileFullUrl;
          }
        });
      }
    },

    //证件号码失去焦点事件
    handleIdCardChange(e) {
        if (this.formModel.idCardNo) {
          this.formModel.age = this.getCardInfo(this.formModel.idCardNo).age;
          this.formModel.birthday = this.getCardInfo(this.formModel.idCardNo).birthDay;
          let sex = Number(this.getCardInfo(this.formModel.idCardNo).sex)
          this.formModel.employeeSex = (sex%2)===0?2:1;
        }else{
          this.formModel.age = 0
          this.formModel.birthday = ''
          this.formModel.employeeSex = ''
        }
      this.$forceUpdate();
    },

    // 计算两个日期之间的差值
    getDiffDay(date_1, date_2) {
      let totalDays, diffDate;
      let myDate_1 = Date.parse(date_1);
      let myDate_2 = Date.parse(date_2);
      // 将两个日期都转换为毫秒格式，然后做差
      diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值

      totalDays = Math.floor(diffDate / (1000 * 3600 * 24)); // 向下取整
      // console.log(totalDays)

      return totalDays; // 相差的天数
    },

    //根据身份证号获取身份信息
    getCardInfo(id) {
            var obj = {};

            // 身份证号 获取性别
            var sexNum = id.substring(id.length - 2, id.length - 1);
            var isEven = ( sexNum % 2 ) === 0;
            obj["sex"] = isEven ? "2" : "1";       // 姓别 1 -> 男 | 2 -> 女

            // 身份证号 获取生日
            var birthDay = id.substring(6, 14);
            var y = birthDay.substring(0, 4);
            var m = birthDay.substring(4, 6);
            var d = birthDay.substring(6, 8);
            obj["birthDay"] = y + "-" + m + "-" + d;

            // 身份证号 获取年龄
            var nowDate = new Date();  //获取当前时间
            var intYear = parseInt(y); //身份证的年份转为数字格式
            var month = nowDate.getMonth() + 1; //获取当前月份，getMonth()方法获取到的月份是从0开始的，所以这里需要加1
            var intMonth = parseInt(m); //身份证的月份转为数字格式
            var day = nowDate.getDate();
            var age = nowDate.getFullYear() - intYear - 1;
            age = parseInt(age);
            //判断身份证月份是否比当前月份小
            if (intMonth < month || (intMonth === month && id.substring(12, 14) <= day)) {
                age++;
            }
            obj["age"] = age;

            return obj;
        },

    //根据身份证号获取年龄
    analyzeIDCard(IDCard) {
      var age = 0,
        yearBirth,
        monthBirth,
        dayBirth;
      //获取用户身份证号码
      var userCard = IDCard;
      //如果身份证号码为undefind则返回空
      if (!userCard) {
        return age;
      }
      var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号码的正则
      if (reg.test(userCard)) {
        if (userCard.length == 15) {
          var org_birthday = userCard.substring(6, 12);
          //获取出生年月日
          yearBirth = "19" + org_birthday.substring(0, 2);
          monthBirth = org_birthday.substring(2, 4);
          dayBirth = org_birthday.substring(4, 6);
        } else if (userCard.length == 18) {
          //获取出生年月日
          yearBirth = userCard.substring(6, 10);
          monthBirth = userCard.substring(10, 12);
          dayBirth = userCard.substring(12, 14);
        }
        //获取当前年月日并计算年龄
        var myDate = new Date();
        var monthNow = myDate.getMonth() + 1;
        var dayNow = myDate.getDate();
        var age = myDate.getFullYear() - yearBirth;
        if (
          monthNow < monthBirth ||
          (monthNow == monthBirth && dayNow < dayBirth)
        ) {
          age--;
        }
        //返回年龄
        return age;
      } else {
        return "";
      }
    },

    //获取详情
    getDetail(id) {
      const parmas = {
        queryBy: 1,
        queryValue: id,
      };
      this.$api.user.GetEmployeeDetail(parmas).then((res) => {
        this.formModel = res;
        if(!this.formModel.fileDataList){
          this.formModel.fileDataList = []
        }
        if(!this.formModel.educationList){
          this.formModel.educationList = []
        }
        if(!this.formModel.contactList){
          this.formModel.contactList = []
        }
        this.formModel.educationList.push({
          employeeCode: this.formModel.employeeCode, //员工编码
          educationCode: "", //	学历编码（关联字典表）
          school: "", //	毕业院校
          graduationTime: "", //毕业时间
          major: "", //	所学专业
        });
        this.formModel.contactList.push({
          employeeCode: this.formModel.employeeCode, //	员工编码
          contactName: "", //联系人姓名
          contactRelationship: "", //与联系人关系
          contactPhone: "", //联系电话
          remark: "", //备注
        });
        if (this.formModel.fileDataList && this.formModel.fileDataList.length > 0) {
          this.formModel.fileDataList.forEach((item) => {
            if (item.fileType == 0) {
              //身份证人像面
              this.imageUrl = item.fileUrl;
            } else if (item.fileType == 1) {
              //身份证国徽面
              this.imageUrl1 = item.fileUrl;
            } else if (item.fileType == 2) {
              //学历证书
              this.imageUrl2 = item.fileUrl;
            } else if (item.fileType == 3) {
              //学位证书
              this.imageUrl3 = item.fileUrl;
            } else if (item.fileType == 4) {
              //离职证明
              this.imageUrl4 = item.fileUrl;
            } else if (item.fileType == 5) {
              //员工照片
              this.imageUrl5 = item.fileUrl;
            }
          });
        }
        this.formModel.workAge = Math.floor(this.getDiffDay(
          this.formModel.hiredate,
          this.dayjs().format("YYYY-MM-DD")
        )/365)
        if(this.formModel.idCardNo){
          this.formModel.age = this.analyzeIDCard(this.formModel.idCardNo);
        }

      });
    },

    //左侧tab栏点击事件
    handleTagClick(item, index) {
      this.tabIndex = index;
      let jump = document.querySelectorAll(".cTitle");
      jump[index].scrollIntoView({ block: "start", behavior: "smooth" });
    },

    //明细下拉框选择事件
    handleSelectChange(row, index, event) {
      if (index == this.formModel.educationList.length - 1) {
        this.formModel.educationList.push({
          employeeCode: this.formModel.employeeCode, //员工编码
          educationCode: "", //	学历编码（关联字典表）
          school: "", //	毕业院校
          graduationTime: "", //毕业时间
          major: "", //	所学专业
        });
      }
    },

    //紧急联系人自动添加表格项
    handleContactChange(row, index, event) {
      if (index == this.formModel.contactList.length - 1) {
        this.formModel.contactList.push({
          employeeCode: this.formModel.employeeCode, //	员工编码
          contactName: "", //联系人姓名
          contactRelationship: "", //与联系人关系
          contactPhone: "", //联系电话
          remark: "", //备注
        });
      }
      console.log(this.formModel.contactList);
    },

    // 返回
    handleBack() {
      this.$router.go(-1);
    },
  },
};
</script>
    <style lang="scss" scoped>
.left_tag {
  width: 120px;
  height: 100%;
  border-right: 1px solid rgb(238, 238, 238);
  background-color: #fff;
  p {
    padding: 11px 0;
    position: relative;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
  }
}

.active {
  color: #3f61f1;
  &::after {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background: #3f61f1;
  }
}

.container {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

.el-form-item .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff !important;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  line-height: 146px;
  text-align: center;
}
::v-deep .avatar {
  width: 146px;
  height: 146px;
  display: block;
}

.img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.5);
}

.tips {
  margin-top: 8px;
  display: inline-block;
  font-size: 12px;
  color: #999aaa;
}
</style>
